import React, { Component } from "react";

// bind，apply，call的区别

/*
  1. 内联地将this.xxx -> this.xxx.bind(this)
    不推荐的
    每次点击的时候，都会产生一个新的函数存在于浏览器内存中，消耗性能

  2. 在constructor里面this.xxx = this.xxx.bind(this);
    推荐的
    用一个变量将新函数存下来了，不会过多地增加内存消耗
    写起来有点麻烦
    
  3. 使用箭头函数，箭头函数的this指向外层
    推荐的
    既不会导致内存增加，简单
*/

class App extends Component {
  constructor() {
    super();
    this.state = {
      count: 10,
    };
    // this.handleClick = this.handleClick.bind(this);
  }

  // handleClick(e) {
  //   console.log(this.state.count);
  // }

  handleClick = () => {
    console.log(this.state.count);
  };

  render() {
    return (
      <>
        <h2>事件的this指向</h2>
        {/* 事件要写成小驼峰的命名 */}
        {/* 如果加了括号，会自动执行 */}
        {/* 事件对象还是有的 */}

        {/* <button onClick={this.handleClick.bind(this)}>btn</button> */}
        <button onClick={this.handleClick}>btn</button>
      </>
    );
  }
}

export default App;
